<template>
    <div class="lottery_wraper">
        <div class="lottery_bg">
            <img :src="lotterybg">
        </div>
        <div :style="{width:lotterywidth[0]}" :class="prize_list.length==4?'min_lottery_Content':''" class="lottery_Content">
            <div class="img"  id="turntable" :style="{transform:'rotate('+threeAngel+'deg)',transition:rotate_transition}">
                <img v-if="angle>0" :src="contentBg">
                <img v-else id="lottery_turntable" :src="contentBg">
                <div class="goods prize-list" v-if="show">
                    <div class="prize-item" v-for="(item,index) in prize_list" :key="index" :style="{transform:item.troter,width:item.width,color:item.color}">
                         <div class="prize-pic">
                            <!-- <img  :src="item.pic" v-if="item.pic"> -->
							<div class="award-img"  :style="{backgroundImage: 'url(' + item.pic + ')' }"></div>
							<!-- <div class="award-img" v-else :style="{backgroundImage: 'url(' + require('../assets/image/game_icon.png') + ')' }"></div> -->
                        </div>
                        <div class="prize-name">
                            {{item.name}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="lottery_pointer" :style="{width:lotterywidth[1]}" @click="clickLottery">
            <img :src="pointerbg">
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            angle: this.lotteryAngle, // 初始度数
            acceleration: 0.5, // 加速的加速度0.5
            r_acceleration: 0.1, // 减速的加速度0.1
            firstTimes: 48, // 48次
            prizeNum: this.lotteryPrizenum,
            lotterybg: this.lotteryBg, // 外圈背景
            contentbg: this.contentBg, // 内容背景
            pointerbg: this.pointerBg, // 指针背景
            lotterywidth: this.lotteryWidth,
            arrOne:[],
            arrTwo:[],
            show:false,
            threeAngel:0,
            defaultAward: require('../assets/image/game_icon.png'),
            rotate_transition: "transform 4s ease-in-out", //初始化选中的过度属性控制
        }
    },
    props: {
        lotteryAngle: {
            type: Number,
            default: 0
        },
        lotteryStart: {
            type: Number,
            default: 0
        },
        lotteryPrizenum: {
            type: Number,
            required: true
        },
        lotteryPrizeno: {
            type: Number,
            required: true
        },
        lotteryBg: {
            type: String
        },
        contentBg: {
            type: String,
            required: true
        },
        pointerBg: {
            type: String,
            required: true
        },
        lotteryWidth: {
            type: Array,
            default: function () {
                return ['85%', '21%']
            }
        },
        prize_list:{
            type: Array
        }
    },
    watch: {
        start () {
            if (this.start >= 1) {
                this.startRotate()
            }
        },
         prize_list(newVal){
            this.$nextTick(()=>{
                 this.setSan();
                 this.show=true
            })
        }
    },
    computed: {
        difference () {
            return (this.prizeNo / this.prizeNum) * 360 - 360 / this.prizeNum / 2
        },
        prizeNo () {
            return this.lotteryPrizeno
        },
        start () {
            return this.lotteryStart
        }
    },
    methods: {
        clickLottery () {
            this.$emit('lotteryClick')
        },
        startRotate () {
            var self = this
            var difference = this.difference
            var speed = 0
            var acceleration = self.acceleration // 加速的加速度
            var racceleration = self.r_acceleration // 减速的加速度
            var firstTimes = self.firstTimes //  执行48次 加速到highSpeed
            var highSpeed = firstTimes * acceleration // 最高速度
            var oneAngel = self.angle + firstTimes * (firstTimes - 1) / 2 * acceleration + highSpeed // 第一阶段的旋转度数
            var secondTimes = 10 // 速度为highSpeed 继续执行10次
            var twoAngel = oneAngel + secondTimes * firstTimes * acceleration // 第二阶段的旋转度数
            var three = highSpeed / racceleration // 执行three次 速度从highSpeed减速到0
            var add = 360 - (twoAngel + three * (three - 1) / 2 * racceleration) % 360 + difference // 使最后刚好转到起点位置
            var twoAngelEnd = twoAngel + add // 第三阶段开始
            this.threeAngel = twoAngelEnd + three * (three - 1) / 2 * racceleration+Math.ceil(this.threeAngel/360)*360　// 最后的旋转度数
            setTimeout(()=>{
                 self.$emit('lotteryDone', {
                    prizeNo: self.prizeNo,
                    prizeNum: self.prizeNum
                })
            },4500)
            
            // function cicle () {
            //     if (self.angle < oneAngel) {
            //         speed += acceleration
            //         self.angle += speed
            //     } else if (self.angle >= oneAngel && self.angle < twoAngel) {
            //         self.angle += speed
            //     } else if (self.angle.toFixed(2) === twoAngel.toFixed(2)) {
            //         self.angle += add
            //     } else if (self.angle > twoAngel && self.angle <= threeAngel) {
            //         speed -= racceleration
            //         if (speed <= 0) {
            //             speed = 0
            //             self.angle = threeAngel % 360
            //             self.flag = true
            //             self.$emit('lotteryDone', {
            //                 prizeNo: self.prizeNo,
            //                 prizeNum: self.prizeNum
            //             })
            //             return false
            //         }
            //         self.angle += speed
            //     }
            //     requestAnimationFrame(cicle)
            // }
            // cicle()
        },
        setSan() {
                let _this = this				
                _this.arrOne = [];
                _this.arrTwo = [];
                _this.rotate_angle = "rotate(" + Math.floor(-360 * 100 / _this.prize_list.length) / 200 + "deg)";
                _this.start_rotating_degree = Math.floor(-360 * 100 / _this.prize_list.length) / 200;
                for(var i = 0; i < _this.prize_list.length; i++) {
                    _this.prize_list[i].troter = "rotate(" + Math.floor(360 * 100 / _this.prize_list.length) / 100 * (0.5 + Number(i)) + "deg) translateX(-50%)"
                    _this.prize_list[i].width = Math.floor(3.14 * 5.6 / this.prize_list.length) + "rem";
                    _this.prize_list[i].color="#B71534";
                    // if(i%2==0){
                    //     _this.prize_list[i].color="#B71534";
                    // }else{
                    //     _this.prize_list[i].color="#fff";
                    // }
                    var item = {
                        value: _this.prize_list[i].name,
                        zIndex: Number(i) + 1,
                        deg: "rotate(" + Math.floor(360 * 100 / this.prize_list.length) * i / 100 + "deg)",
                        degnum: i,
                    }
                    if(i < _this.prize_list.length / 2) {
                        _this.arrOne.push(item)
                    } else {
                        _this.arrTwo.push(item)
                    }
                }
            },
    }
    // mounted(){
    //     this.$nextTick(()=>{
    //         setTimeout(()=>{
    //              this.setSan();
    //              this.show=true
    //         },200)
    //     })
    // }
}
</script>

<style scoped lang="scss">
    .lottery_wraper{
        position: relative;
        max-width: 500px;
    }
    .lottery_wraper img{
        width: 100%;
    }
    .lottery_Content{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
    }
    .lottery_pointer{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        span{
            position: absolute;
			top: .9rem;
			left: .41rem;
			color: #f46b44;
			font-size: .3rem;
			font-weight: bold;
        }
    }
    .goods{
        width: 100%;
        height: 100%;
        position: absolute;
        top:0;
    }
    .prize-item{
        text-align: center;
        position: absolute;
        top: .10rem;
        z-index: 12;
        height: 2.35rem;
        left: 50%;
        transform: translateX(-50%);
        transform-origin: 0 100%;
        .prize-pic{
            margin-top:.1rem;
            text-align: center;
            .award-img{
                margin: 0 auto;
                width: 30%;
                padding-bottom: 30%;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
            }
        }
    }
    .prize-name {
        word-wrap: break-word;
        padding-top:0.1rem;
        font-size:0.2rem;
    }
    .min_lottery_Content{
        .award-img{
            width:30% !important;
            padding-bottom: 30% !important;
        }
    }
</style>
